<template>
    <div class="user-detail">
        <div class="user-detail-top">
            <div class="head-top">
                <img :src="userinfo.headImg" alt="">
                <span>{{userinfo.username}}</span>
            </div>
            <p>
                <span>手机号码</span>
                <span>{{userinfo.telephone}}</span>
            </p>
            <p>
                <span>所在地区</span>
                <span>{{userinfo.city}}</span>
            </p>
            <p>
                <span>注册方式</span>
                <span>{{sourceTypeLabel[userinfo.sourceType]}}</span>
            </p>
            <p>
                <span>累计消费</span>
                <span><em>{{userinfo.amount}}</em></span>
            </p>
            <p v-if="userList && userList.length === 0">
                <span>他邀请的用户</span>
                <span>暂无</span>
            </p>
        </div>
        <div v-if="userList && userList.length > 0" class="user-detail-bottom">
            <ul>
                <li>他邀请的用户</li>
                <li v-for="user in userList" :key="user.uid">
                    <span><img :src="user.headImg" alt=""> <span class="username">{{user.username}}</span></span>
                    <span><i class="icon-city"></i> <span class="city">{{user.city}}</span></span>
                    
                </li>
            </ul>
        </div>
    </div>
</template>
<script>
    import dataApi from '../../api/data.js';
    import { Toast } from 'mint-ui';
    export default {
        data () {
            return {
                userinfo: {},
                userList: [],
                sourceTypeLabel: ['手机注册', '微信注册']
            }
        },
        created() {
            this.reqData()
        },
        methods: {
            reqData() {
                const uid = this.$route.query.uid
                dataApi.getUserDataDetail({uid}).then(res => {
                    if (res.code == 0) {
                        this.userinfo = res.t
                        this.userList = res.t && res.t.userList || []
                    } else {
                        Toast({
                            message: res.message,
                            duration: 2000
                        });
                    }
                })
            }
        }
    }
</script>
<style lang="less" scoped>
    .user-detail {
        font-size: .3rem;
        &-top {
            font-size: .3rem;
            border-bottom: 10px solid #e8e8e8;
            .head-top {
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                margin: .2rem;
                margin-top: .5rem;
                img {
                    width: 1.21rem;
                    height: 1.21rem;
                    border-radius: 50%;
                }
                span {
                    margin-top: .2rem;
                    font-size: .32rem;
                    font-size: PingFangSC-Medium;
                }
            }
            p {
                padding: 0 .3rem;
                height: 50px;
                line-height: 50px;
                border-bottom: 1px solid #e8e8e8;
                color: #282828;
                display: flex;
                font-family: PingFangSC-Regular;
                font-size: .28rem;
                justify-content: space-between;
                em {
                    font-style: normal;
                    color: red;
                }
            }
        }
        &-bottom {
            li {
                height: 50px;
                display: flex;
                font-size: .3rem;
                font-family: PingFangSC-Regular;
                justify-content: space-between;
                align-items: center;
                border-bottom: 1px solid #e8e8e8;
                padding: 0 .3rem;
                img {
                    width: 30px;
                    height: 30px;
                    border-radius: 50%;
                }
                span {
                    font-size: .24rem;
                    display: flex;
                    align-items: center;
                    .username {
                        margin-left: 15px;
                    }
                    .city {
                        margin: 0 20px 0 1px;
                        color: #7b7b7b;
                    }
                }
            }
        }
    }

    .icon-city {
        width: .35rem;
        height: .35rem;
        opacity: .5;
        background-size: contain;
        background-repeat: no-repeat;
        background-image: url(../../assets/img/icon-city.png);
    }

</style>